.container {
  padding: 0;
}

.header {
  background: #eee;

  h2 {
    margin: 0;
    padding: 26px;
    float: left;
    line-height: 26px;
  }

  .nav {
    padding: 20px;
    float: left;
  }
}

.tableContainer {
  overflow: auto;
  margin-top: 20px;
}

.viewRowsContainer {
  border-left: 1px solid #ddd;
}

.insertContainer {
  button {
    margin: 0 10px;
  }

  label.radioLabel {
    padding-top: 0;

    input[type='radio'] {
      margin-top: 10px;
    }
  }

  span.radioSpan {
    line-height: 34px;
  }
}

.table {
  width: -webkit-fill-available;
  // width: auto;

  thead {
    background: #333;
    color: #ddd;
  }

  th {
    min-width: 100px;
    font-weight: 300;
  }

  tr {
    cursor: pointer;
  }

  td {
    width: 300px;
    max-width: 300px;
    white-space: pre;
    overflow: auto;
  }
}

.expandable {
  color: #779ecb;
  text-decoration: underline;
}

a.expanded {
  color: red;
}

.expandable:hover {
  background: #eee;
  transition: 0.2s;
  cursor: pointer;
}

.tableNameInput {
  width: 300px;
}

.addCol {
  .input {
    width: 250px;
    display: inline-block;
  }

  .select {
    margin: 0 20px;
    display: inline-block;
    width: 120px;
  }

  i:hover {
    cursor: pointer;
    color: #b85c27;
    transition: 0.2s;
  }
}

.roleTag {
  margin-right: 5px;
}

.resetPassForm {
  margin-top: 10px;
  border: 1px solid #eee;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #eee;
  padding: 8px;
}

.relationshipTopPadding {
  padding: 10px 0;
}

.relEditButtons {
  display: flex;
  flex-direction: row;
}
